import Taro from '@tarojs/taro';
import {View, Image, Text, ScrollView} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {AtTabs, AtTabsPane} from 'taro-ui';
import {actionCreator} from "../../../store/actions";
import {request, unite} from '../../../utils/index';
import TopModal from "../../../components/top-modal/topModal";
import SelectList from '../../../components/select-list/selectList';
import './classroomList.scss';
import none from "../../../asset/images/none.png";
import Home from "../../../asset/images/home.png";
import search from "../../../asset/images/search_icon.png";
import Go from "../../../asset/images/go.png";
import Head from "../../../asset/images/head.png";

class ClassroomList extends Taro.Component {
    config = {
        navigationBarTitleText: '门店',
        navigationBarBackgroundColor: '#ffffff'
        // enablePullDownRefresh: true
    };

    state = {
        modelStatus: false,
        classScaleId: -1, //团课规模ID
        classTypeId: -1, //课程类型ID
        periodId: -1, //时间段区间ID
        priceId: -1, //	价格区间ID
        regionId: '', //区域ID
        regionStatus: -1,
        classList: [], //教室列表
        typeAreaWrap: [], //区域数组
        classDate: '',

        current: 0,
    };

    componentDidMount() {
        const option = this.$router.params;
        const {regionIds, getData} = this.props;
        console.log(option.timer + 'option.timer');
        this.setState({
            typeAreaWrap: getData.regions,
            regionId: regionIds,
            classDate: option.timer,
        }, () => {
            this.getSsList(); //列表
        });
    }

    getSsList = () => {
        const {classScaleId, classTypeId, periodId, priceId, regionId, regionStatus} = this.state;
        console.log(regionId + 'zhazoaao');
        const params = {
            url: '/wx/firstPage/getNearByRoomList',
            data:{
                classScaleId, //团课规模ID
                classTypeId, //课程类型ID
                periodId, //时间段区间ID
                priceId, //价格区间ID
                regionId, //区域ID
                queryType: regionStatus == -1 ? 3 : 1
            }
        };
        console.log(params);
        request(params).then(res => {
            Taro.stopPullDownRefresh(); //停止当前页面下拉刷新
            if (res) {
                if(res.code == 200) {
                    this.setState({
                        classList: res.data,
                    })
                }
            }
        })
    };

    getTimers = (time, index) => {
        this.setState({
            classDate: time,
            current: index,
        }, () => {
            this.getSsList() //获取教室列表
        });
    };

    //跳转教室详情
    skipDetail = (id) => {
        Taro.navigateTo({
            url: `../classroom-detail/classroomDetail?id=${id}`
        })
    };

    //跳转导航
    skipDaoHang = (longitude, latitude, name, address, e) => {
        e.stopPropagation(); //防止父级点击事件干扰
        Taro.openLocation({
            latitude: Number(latitude),
            longitude: Number(longitude),
            name: name,
            address: address
        })
    };

    showModel = () => {
        this.setState(prevState => ({
            modelStatus: !prevState.modelStatus
        }))
    };

    skipIndex = () => {
        Taro.switchTab({
            url: `/pages/index/index`
        })
    };

    getTypes = (item) => {
        console.log(item.regionStatus + 'zhao')
        const {regionId} = this.state;
        this.setState({
            classScaleId: Number(item.selectList) || -1, //1v1
            periodId: Number(item.tgTypeId) || -1, //时间段
            regionId: Number(item.regionId), //地区
            regionStatus: item.regionStatus,
            classTypeId: Number(item.classTypeId) ||-1, //课程类型
            priceId: Number(item.moneyId) || -1, //价格id
            modelStatus: false,
        }, () => {
            this.setState({
                regionId: item.regionId || regionId,
            }, () => {
                this.getSsList() //获取列表
            })
        })
    };

    onPullDownRefresh = () => {
        this.getSsList(); //列表
    };

    onChangeType = (regionId, parentRegionId) => {
        this.setState({
            regionId: regionId == -1 ? parentRegionId : regionId,
            regionStatus: regionId,
        }, () => {
            console.log(regionId);
            this.getSsList();
        });
    };

    tabsClick = (is) => {
        const {getData} = this.props;
        let timer = getData.weekDays;
        this.setState({
            current: is,
            classDate: timer[is].classDate
        }, () => {
            this.getSsList();
        });
    };

    //跳转地图
    skipMap = () => {
        const {map, getData} = this.props;
        if (map) {
            Taro.navigateBack({
                delta: 1
            })
            // Taro.navigateTo({
            //     url: '../map/map?regionId=' + getData.regions[0].regionId + '&longitude=' + map.longitudes + '&latitude=' + map.latitudes
            // })
        } else {
            unite.showTipModal("定位失败，请确认微信定位功能是否开启！");
        }
    };

    render() {
        const {
            classList, modelStatus, regionId, classDate, regionStatus,
            classScaleId, typeAreaWrap, classTypeId, priceId, current,
        } = this.state;
        const {getData} = this.props;
        return (
            <View className="page">
                {/*<View className="course-head">*/}
                {/*    <View className="leixin-list-wrap flex-lr">*/}
                {/*        <View className="leixin-list">*/}
                {/*            {typeAreaWrap.map((item, index) => (*/}
                {/*                <View className={`list-item ${(regionId == item.regionId) ? 'list-item-active' : ''} ${regionStatus == item.regionId ? 'list-item-active' : ''}`} key={index} onClick={this.onChangeType.bind(this, item.regionId, item.parentRegionId)}>*/}
                {/*                    <View>{item.description}</View>*/}
                {/*                    {(regionId == item.regionId || regionStatus == item.regionId) &&(*/}
                {/*                        <View className="list-bottom-avtive"></View>*/}
                {/*                    )}*/}
                {/*                </View>*/}
                {/*            ))}*/}
                {/*        </View>*/}
                {/*        <View className="leixin-Gd-wrap" onClick={this.showModel}>*/}
                {/*            <View className="leixin-Gd-wrap-text">筛选</View>*/}
                {/*        </View>*/}
                {/*    </View>*/}
                {/*    /!*<View className="keep-content-list">*!/*/}
                {/*    /!*    <SelectList getClassDate={classDate} onTimer={this.getTimers}/>*!/*/}
                {/*    /!*</View>*!/*/}
                {/*</View>*/}
                {/*<AtTabs className="com-tabs" current={current} tabList={getData.weekDays} onClick={this.tabsClick.bind(this)}>*/}
                {/*    {getData.length != 0 && getData.weekDays.map((va, ixs) => (*/}
                {/*        <AtTabsPane current={current} key={ixs} index={ixs+1} >*/}
                {/*            <ScrollView*/}
                {/*                className="content-view"*/}
                {/*                scrollY*/}
                {/*            >*/}
                {/*                */}
                {/*            </ScrollView>*/}
                {/*        </AtTabsPane>*/}
                {/*    ))}*/}
                {/*</AtTabs>*/}
                <View className="keep-content">
                    <View className="flex-lr keep-map-go">
                        <View></View>
                        <View className="flex-r" onClick={this.skipMap}>
                            <View className="map-text">地图查找</View>
                            <View className="arrow"></View>
                        </View>
                    </View>
                    {classList.map((item, index) => (
                        <View className="keep-head" key={index}>
                            <View className="classroom-wrap" onClick={this.skipDetail.bind(this, item.roomId)}>
                                <Image className="keep-head-img" src={item.avatar || Head}/>
                                <View className="classroom-name"><Text>{item.roomName || '暂无名称'}</Text></View>
                                <View className="classroom-address">{item.address}</View>
                                {/*<View className="classroom-btn" >查看</View>*/}
                            </View>
                        </View>
                    ))}
                    {(!classList || classList.length == 0) &&(
                        <View className="none">
                            <Image src={none}/>
                            <View>暂无数据</View>
                        </View>
                    )}
                </View>
                {modelStatus &&(
                    <TopModal
                        getClassTypeId={classTypeId} //类型id
                        getPriceId={priceId} //价格id
                        onClose={this.showModel}
                        getRegionId={regionId} //区域id
                        getTimer={classDate}
                        onRegionStatus={regionStatus}
                        getClassScaleId={classScaleId} //类型id 一对一  一对多
                        onExport={this.getTypes}
                    />
                )}
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {userToken, map, regionIds, getData, typeDatas} = state;
    return {
        userToken,
        map,
        regionIds,
        getData,
        typeDatas
    }
};

const mapDispatchToProps = {
    setUserToken: actionCreator.setUserToken,
};

export default connect(mapStateToProps, mapDispatchToProps)(ClassroomList);



